<template>
  <div id="shopgoods">
    <div class="gtop">
      <div class="gtitle">粥品香坊(大运村)</div>
      <div class="stars">
        <div class="gstar1"></div>
        <div class="gstar2"></div>
        <div class="gstar3"></div>
        <div class="gstar4"></div>
        <div class="gstar5"></div>
      </div>
    </div>
    <div class="gmiddle">
      <div>
        <div class="gmtip">
          <div class="line"></div>
          <div class="mess">优惠信息</div>
          <div class="line"></div>
        </div>
        <div class="gdmessage">
          <div class="gd">
            <img src="/images/decrease_2@3x.png" alt="" />
            <div class="gdinfo">在线支付满28件5，满50减10</div>
          </div>
          <div class="gd">
            <img src="/images/discount_2@3x.png" alt="" />
            <div class="gdinfo">在线支付满28件5，满50减10</div>
          </div>
          <div class="gd">
            <img src="/images/discount_2@3x.png" alt="" />
            <div class="gdinfo">在线支付满28件5，满50减10</div>
          </div>
          <div class="gd">
            <img src="/images/special_2@3x.png" alt="" />
            <div class="gdinfo">在线支付满28件5，满50减10</div>
          </div>
          <div class="gd">
            <img src="/images/special_2@3x.png" alt="" />
            <div class="gdinfo">在线支付满28件5，满50减10</div>
          </div>
        </div>
      </div>
      <div>
        <div class="gmtip">
          <div class="line"></div>
          <div class="mess">商家公告</div>
          <div class="line"></div>
        </div>
        <div class="gdmessage">
            <p>
                粥品香坊其烹饪粥料的秘方源于中国千年古法，在融和现代制作工艺，
                由世界烹饪大使屈浩先生领衔研发。坚守纯天然、0添加的良心品质深得消费者
                青睐，发展至今称为周磊引领品牌。是2008年奥运会和2013年园博会指定餐饮服务商。
            </p>
        </div>
      </div>
    </div>

    <div class="gfooter">
        <div class="layout-close close"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "popPage",
};
</script>

<style scoped>
#shopgoods {
  width: 100%;
  height: 100%;
  
  
}

.gtitle {
  font-size: 32rem;
  font-weight: 700;
  text-align: center;
  color: rgb(255, 255, 255);
  line-height: 32rem;
  padding: 128rem 0 32rem;
}
.stars {
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  width: 375rem;
  height: 48rem;
  padding-bottom: 56rem;
}
.gstar1 {
  width: 40rem;
  height: 40rem;
  background: url(/images/star24_on@3x.png) no-repeat;
  background-size: cover;
}
.gstar2 {
  width: 40rem;
  height: 40rem;
  background: url(/images/star24_on@3x.png) no-repeat;
  background-size: cover;
}
.gstar3 {
  width: 40rem;
  height: 40rem;
  background: url(/images/star24_on@3x.png) no-repeat;
  background-size: cover;
}
.gstar4 {
  width: 40rem;
  height: 40rem;
  background: url(/images/star24_on@3x.png) no-repeat;
  background-size: cover;
}
.gstar5 {
  width: 40rem;
  height: 40rem;
  background: url(/images/star24_off@3x.png) no-repeat;
  background-size: cover;
}
.gmiddle {
  padding: 0 72rem;
}
.gmtip {
  display: flex;
  align-items: center;
}
.gmtip .mess {
  font-size: 28rem;
  font-weight: 700;
  text-align: center;
  color: rgb(255, 255, 255);
  line-height: 28rem;
  margin: 0 24rem;
}
.gmtip .line {
  width: 220rem;
  height: 2rem;
  line-height: 32rem;
  background-color: rgb(255, 255, 255, 0.2);
}
.gdmessage {
  padding: 48rem 24rem 32rem 24rem;
}
.gdmessage .gd {
  display: flex;
  align-items: center;
  padding-bottom: 24rem;
}
.gd img {
  width: 32rem;
  height: 32rem;
  margin-right: 12rem;
}
.gd .gdinfo {
  font-size: 24rem;
  font-weight: normal;
  color: rgb(255, 255, 255);
  line-height: 24rem;
}
.gdmessage p{
    font-size: 24rem;
    font-weight: normal;
    color: rgb(255, 255, 255);
    line-height: 48rem;
}

.gfooter {
    position: relative;
    padding-bottom: 300rem;
}
.gfooter .close{
    position: absolute;
    font-size: 64rem;
    color:rgba(255,255,255,0.6);
    left: 357rem;
    bottom: 64rem;
}
</style>